import "./img/1.jpeg"
import "./img/2.jpeg"
import "./img/3.jpeg"
function Light($box) {
  // 装红绿灯的容器
  this.box = document.querySelector($box);
  // 初始值
  this.index = 1;
}
// 初始化图片方法
Light.prototype.init = function () {
  // console.log("初始化");
  this.img = new Image();
  this.img.draggable = false;
  this.img.src = `../../img/1.jpeg`;
  // 添加到容器中
  this.box.appendChild(this.img);
  // 初始化完成后点击绑定点击事件
  this.blindClick();
};
// 绑定事件
Light.prototype.blindClick = function () {
  this.img.addEventListener("click", () => {
    this.index++;
    if (this.index > 3) {
      this.index = 1;
    }
    this.img.src = `../../img/${this.index}.jpeg`;
  });
};
let l1 = new Light(".box1");
l1.init();
let l2 = new Light(".box2");
l2.slide = function () {
  console.log(this.img);
  let timer = setInterval(() => {
    this.index++;
    if (this.index > 3) {
      this.index = 1;
    }
    this.img.src = `../../img/${this.index}.jpeg`;
  }, 1000);
  console.log(timer);
  this.img.addEventListener("mouseenter", () => {
    clearInterval(timer);
  });
  this.img.addEventListener("mouseleave", () => {
    clearInterval(timer);
    timer = setInterval(() => {
      this.index++;
      if (this.index > 3) {
        this.index = 1;
      }
      this.img.src = `../../img/${this.index}.jpeg`;
    }, 1000);
  });
};
l2.init();
l2.slide();
let l3 = new Light(".box3");
// 重写blindblick
l3.__proto__.blindClick = function () {
  this.img.addEventListener("click", () => {
    this.index--;
    if (this.index < 1) {
      this.index = 3;
    }
    this.img.src = `../../img/${this.index}.jpeg`;
  });
};
l3.init();
console.log(l1, l2, l3);